import React, {useContext, useLayoutEffect, useState} from 'react'
import './index.scss'
import Item from "../../../components/Item";
import Axios from "../../../utils/Axios";
import {message} from "antd";
import {myLoadingContext} from "../../../App";

export default function JoinIn() {
  const [groups, setGroups] = useState([])
  const {load} = useContext(myLoadingContext)
  useLayoutEffect(()=>{
    async function getAllGroup() {
      try {
        const res = await Axios.get('/user/userGroups')
        if (res.data.code === 200) {
          return  res.data.data
        } else {
          message.warning(res.data.msg, 2)
        }
      }
      catch (e) {
        console.log('error: ', e)
      }
    }
    getAllGroup().then(data => {
      setGroups(data)
    })
  }, [load])
  return(
    <div className="card-group">
      {
        groups.map((item) => (
          <Item desc={item.description==='null'?'考勤组':item.description}
                key={item.id}
                code={item.code}
                name={item.name}
                adminName={item.adminName}
                path={`/main/joinin/useratt/${item.id}`}
                src={item.avatarAddress}
                img={item.picture}
          />
        ))
      }
    </div>
  )
}